import './styles.scss'
import { useCallback, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
const useRefAnimation = () => {
  const ref = useRef<HTMLDivElement>(null!)
  useEffect(() => {
    ref.current.style.opacity = '1'
  }, [])
  return ref
}
const Guild = () => {
  const navigate = useNavigate()
  const handleIconClick = useCallback(() => {
    if (localStorage.getItem('token')) {
      navigate('/home');
    } else {
      navigate('/account/login');
    }
  }, [navigate])

  const ref = useRefAnimation()
  return (
    <div ref={ref} className='page guild-page'>
      <img className='main-pic' src={require('../../images/logo_@2x.png')} alt='' />
      <p className='title'>欢乐购</p>
      <img alt='欢乐购' className='sub-pic' src={require('../../images/slogn_word_icon_@2x.png')} />
      <div className='iconfont arrow-icon' onClick={handleIconClick}>&#xe60c;</div>
    </div>
  );
}

export default Guild;